<template>
  <div>
    <VirtualList :data="datas" :box-height="500" :estimated-height="80" >
      <template #default="{ item }">
        <!-- 数据项自定义样式 -->
        <div :style="{ height: `${item}px`, padding: '10px' }" class="item" >{{ item }}</div>
      </template>
    </VirtualList>
  </div>
</template>

<script setup>
import VirtualList from '../components/VirtualList/index.vue'
import { ref } from 'vue'
const datas = ref([]) // 数据源
for (let i = 0; i < 1000; i++) {
  datas.value.push(i + 1)
}
</script>

<style lang="scss" scoped>
.item {
  border: 1px solid #0000ff;
  text-align: center;
  // height: 120px;
  margin-bottom: 10px;
  padding: 20px;
}
</style>